<div class="section">
  <div class="top" *ngIf="tagData['data']['myValue'];else falsyTemplate" [ngStyle]="{
      'margin-left':
        tagData['data']['myValue'] <= tagData['data']['maxValue'] / 2
          ? (tagData['data']['myValue'] / tagData['data']['maxValue'] + 0.01) *
              100 +
            '%'
          : 0,
      'text-align':
        tagData['data']['myValue'] <= tagData['data']['maxValue'] / 2
          ? 'left'
          : 'right',
      'margin-right':
        tagData['data']['myValue'] > tagData['data']['maxValue'] / 2
          ? (1.01 - tagData['data']['myValue'] / tagData['data']['maxValue']) *
              100 +
            '%'
          : 0
    }">
    <div class="top-headBox" *ngIf="tagData['data']['myValue'] <= tagData['data']['maxValue'] / 2">
      <div class="top-slash"></div>
      <div class="top-line"></div>
    </div>
    <div class="top-text">
      <span>{{ tagData["data"]["myLabel"] }}</span>
    </div>
    <div class="top-tailBox" *ngIf="tagData['data']['myValue'] > tagData['data']['maxValue'] / 2">
      <div class="top-line"></div>
      <div class="top-slash-2"></div>
    </div>
  </div>
  <ng-template #falsyTemplate>
    <div style="background-color: transparent;color: transparent;">&nbsp;</div>
  </ng-template>
  <div class="middle">
    <span class="head">{{ tagData["data"]["minValue"] }}</span>
    <span class="tail">{{ tagData["data"]["maxValue"] }}</span>
    <div class="graph"></div>
  </div>
  <div class="bottom" [ngStyle]="{
      'margin-left':
        tagData['data']['avgValue'] <= tagData['data']['maxValue'] / 2
          ? (tagData['data']['avgValue'] / tagData['data']['maxValue'] + 0.01) *
              100 +
            '%'
          : 0,
      'text-align':
        tagData['data']['avgValue'] <= tagData['data']['maxValue'] / 2
          ? 'left'
          : 'right',
      'margin-right':
        tagData['data']['avgValue'] > tagData['data']['maxValue'] / 2
          ? (1.01 - tagData['data']['avgValue'] / tagData['data']['maxValue']) *
              100 +
            '%'
          : 0
    }">
    <div class="headBox" *ngIf="tagData['data']['avgValue'] <= tagData['data']['maxValue'] / 2">
      <div class="slash"></div>
      <div class="line"></div>
    </div>
    <div class="text">
      <span>{{ tagData["data"]["avgLabel"] }}</span>
    </div>
    <div class="tailBox" *ngIf="tagData['data']['avgValue'] > tagData['data']['maxValue'] / 2">
      <div class="line"></div>
      <div class="slash"></div>
    </div>
  </div>
</div>